<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>mysql replication web console</title>
    <link href="css/bootstrap.css" rel="stylesheet">

    <style>
        body {
            padding: 20px;
        }

    </style>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>

<form>
    <fieldset>
        <legend>Basic Config</legend>
        <label>Destination Name</label>
        <input id="destination" name="destination" type="text" placeholder="destination1">
        <label>MySQL Address</label>
        <input id="dbAddress" name="dbAddress" type="text" placeholder="localhost">
        <label>MySQL User</label>
        <input id="dbUser" name="dbUser" type="text" placeholder="canal">
        <label>MySQL Password</label>
        <input id="dbPassword" type="text" placeholder="canal">
        <label>RocketMq Name Addr</label>
        <input id="mqNamesrvAddr" type="text" placeholder="localhost:9876">


    </fieldset>

    <fieldset>
        <legend>Config Table</legend>
        <label>
            <button id="add-table" type="button">Add Table</button>
        </label>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th style="width: 100px;">Table Name</th>
                <th style="width: 100px;">Queue Topic</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="table-config">

            </tbody>

        </table>
    </fieldset>
    <button id="save-btn" type="button">SAVE|UPDATE</button>
    <button id="test-btn" type="button">TEST SCRIPT</button>
</form>
<script type="text/javascript">

    function deleteTableConfig(e) {

        if (confirm("Sure delete")) {
            $(e).parent().parent().remove()
        }
    }

    function getQueryString(paramName) {

        paramName = paramName.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]").toLowerCase();

        var reg = "[\\?&]" + paramName + "=([^&#]*)";

        var regex = new RegExp(reg);

        var regResults = regex.exec(window.location.href);

        if (regResults == null)    return "";

        else    return regResults [1];

    }

    var tableConfigHTML = '<tr>' +
            '<td ><input name="tableName" type="text" placeholder="table name" value="#tableName"></td>' +
            '<td><input name="topic" type="text" placeholder="Queue Topic" value="#topic"></td>' +
            '<td><button type="button" onclick="deleteTableConfig(this)" >DELETE</button> </td>' +
            '</tr>';

    $(function () {

        var destination = getQueryString("destination");
        if (destination) {

            $.get("config/get?destination=" + destination, function (data) {
                console.log(data)
                $("#destination").val(data.destination)
                $("#dbAddress").val(data.dbAddress)
                $("#dbUser").val(data.dbUser)
                $("#dbPassword").val(data.dbPassword)
                $("#mqNamesrvAddr").val(data.mqNamesrvAddr)

                $(data.tableConfigs).each(function () {
                    $("#table-config").append($(tableConfigHTML.replace("#tableName", this.tableName).replace("#topic", this.topic)))
                })


            }, "json")
        }

        $("#add-table").click(function () {
            $("#table-config").append($(tableConfigHTML.replace("#tableName", "").replace("#topic", "")))
        })

        function getData() {
            var destination = $("#destination").val()
            if (destination.length == 0) {
                alert("require destination")
                return
            }
            var dbAddress = $("#dbAddress").val()
            if (dbAddress.length == 0) {
                alert("require dbAddress")
                return
            }
            var dbUser = $("#dbUser").val()
            if (dbUser.length == 0) {
                alert("require dbUser")
                return
            }
            var dbPassword = $("#dbPassword").val()
            if (dbPassword.length == 0) {
                alert("require dbPassword")
                return
            }

            var mqNamesrvAddr = $("#mqNamesrvAddr").val()
            if (mqNamesrvAddr.length == 0) {
                alert("require mqNamesrvAddr")
                return
            }


            var tableConfigs = []
            var err = ""
            var hasTableConfig = false;

            $("#table-config tr").each(function () {

                hasTableConfig = true
                if (err != "") {
                    return
                }
                var tableName = $("input[name=tableName]", this).val().trim()

                var topic = $("input[name=topic]", this).val().trim()

                if (tableName.length == 0) {
                    err += "Table Name is empty."
                }

                if (topic.length == 0) {
                    err += "Topic is empty."
                }

                tableConfigs.push({
                    tableName: tableName,
                    topic:topic
                })

            })

            if (!hasTableConfig) {
                alert("Must has table config.");
                return;
            }

            if (err != "") {
                alert(err)
                return
            }
            return {
                destination: destination,
                dbAddress: dbAddress,
                dbUser: dbUser,
                dbPassword: dbPassword,
                mqNamesrvAddr: mqNamesrvAddr,
                tableConfigs: tableConfigs

            }
        }


        $("#save-btn").click(function () {

            var conf = getData()
            if (!conf) {
                return
            }

            var saveBtn = $("#save-btn").attr("disabled", "disabled")

            $.post("config/save", {
                json: JSON.stringify(conf)
            }, function (data) {
                alert(data)
                saveBtn.removeAttr("disabled")
                if (data == "ok") {
                    document.location.href = "index.html"
                }
            })


        })

        $("#test-btn").click(function () {

            var conf = getData()
            if (!conf) {
                return
            }

            $.post("config/test", {
                json: JSON.stringify(conf)

            }, function (data) {
                alert(data)

            })
        })
    })


</script>


</body>

</html>
